<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap Demo</title>
    <link rel="stylesheet" href="./styles/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/font-awesome.min.css">
    <link rel="stylesheet" href="./styles/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./styles/serverDetail.css">
</head>

<body>
<!-- 导航go -->
<div class="all_nav navbar navbar-default navbar-fixed-top" id="navbar" role="navigation">
    <div class="container">
        <div class="col-md-2">
            <a href="javascript: void(0);">HeiKiz</a>
        </div>
        <div class="col-md-8">
            <ul class="nav_show nav navbar-nav">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a class="nav_choose" href="./servar_aboutServer.html">服务商管理</a>
                </li>
                <li>
                    <a href="./institution_aboutInstitution.html">机构管理</a>
                </li>
                <li>
                    <a href="./teacher_teacherIndex.html">师训管理</a>
                </li>
                <li>
                    <a href="./order_orderManagement.html">订单管理</a>
                </li>
                <li>
                    <a href="./data_statisticalData.html">数据统计</a>
                </li>
            </ul>
        </div>
        <div class="use_info col-md-2">
            <a href="javascript: void(0);" id="dropdownMenu1" data-toggle="dropdown">
                <img class="user_img" src="./images/timg.jpg">
                <p class="user_name">开心麻花</p>
                <span class="caret"></span>
            </a>
            <ul id="dropdown_menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation">
                    <a id="id1" role="menuitem" tabindex="-1" href="javascript: void(0);">保存密码</a>
                </li>
                <li role="presentation">
                    <a id="id2" role="menuitem" tabindex="-1" href="javascript: void(0);">退出账号</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 导航 end -->

<!-- 数据概览 -->
<div class="list_main container clearfix">
    <div class="add_server pull-left">
        返回服务商
        <i class="icon-angle-left"></i>
    </div>
    <div class="server_opration pull-right">
        <div id="purchase" class="title_button" data-toggle="modal" data-target="#purchaseModal">进货</div>
        <div id="add_teacher" class="title_button" data-toggle="modal" data-target="#addTeacherModal">增加师训账户</div>
        <div id="add_subordinate" class="title_button" data-toggle="modal" data-target="#addSubordinate">添加机构</div>
    </div>
</div>

<!-- 服务商 -->
<div class="server_wrap container">
    <div class="server_title row">
        <ul class="server_tab clearfix">
            <li class="choose_tab">
                <a href="#" data-target="#overview" data-toggle="tab">
                    <img src="./images/iconOverview.png" alt="">
                    <p>概览</p>
                </a>
            </li>
            <li class="">
                <a href="#" data-target="#baseinfo" data-toggle="tab">
                    <img src="./images/iconBasicinformation.png" alt="">
                    <p>基本信息</p>
                </a>
            </li>
            <li class="">
                <a href="#" data-target="#teacher_acount" data-toggle="tab">
                    <img src="./images/iconAccountnumber.png" alt="">
                    <p>师训账号</p>
                </a>
            </li>
            <li class="">
                <a href="#" data-target="#subordinate" data-toggle="tab">
                    <img src="./images/iconMechanism.png" alt="">
                    <p>下属机构</p>
                </a>
            </li>
            <li class="">
                <a href="#" data-target="#order_list" data-toggle="tab">
                    <img src="./images/iconOrder.png" alt="">
                    <p>订单列表</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        <!-- 概览 -->
        <div class="tab-pane fade in active" id="overview">
            <div class="base_info clearfix">
                <div class="server_state clearfix">
                    <p class="pull-left">服务商状态：</p>
                    <ul>
                        <li class="state_choose pull-left">正常</li>
                        <li class="pull-left">考核期</li>
                        <li class="pull-left">沉默期</li>
                    </ul>
                </div>
                <div class="server_check">
                    <div class="about_time pull-left">
                        <!-- 能用的到的时间 -->
                        <div class="time_group input-append date form-group pull-left" id="start_time"
                             data-date="2012-12" data-date-format="dd-mm-yyyy">
                            <input size="16" type="text" class="form-control" value="2012-12" readonly>
                            <span class="time_icon add-on">
                                <i class="icon-sort"></i>
                            </span>
                        </div>
                        <span class="time_heng pull-left">-</span>
                        <!-- 能用的到的时间 -->
                        <div class="time_group input-append date form-group pull-left" id="end_time" data-date="2012-12"
                             data-date-format="dd-mm-yyyy">
                            <input size="16" type="text" class="form-control" value="2012-12" readonly>
                            <span class="time_icon add-on">
                                <i class="icon-sort"></i>
                            </span>
                        </div>
                    </div>
                    <div class="choose_time pull-left clearfix">
                        <p class="pull-left">最近：</p>
                        <div class="time_list time_choose pull-left">1个月</div>
                        <div class="time_list pull-left">3个月</div>
                        <div class="time_list pull-left">全部</div>
                    </div>
                </div>
            </div>
            <!-- 消费列表 -->
            <div class="all_list row">
                <div class="col-md-4">
                    <div class="list_team col-md-12">
                        <div class="col-md-5 col-md-offset-1 text-center">
                            <p class="info_money">￥<span id="sign_cost">3456</span></p>
                            <p class="info_name">签约费用</p>
                        </div>
                        <div class="border_height pull-left"></div>
                        <div class="col-md-5 text-center">
                            <p class="info_money">￥<span id="sign_bonus">12345</span></p>
                            <p class="info_name">签约奖金</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="list_team col-md-12">
                        <div class="col-md-5 col-md-offset-1 text-center">
                            <p class="info_money">￥<span id="sign_cost1">3456</span></p>
                            <p class="info_name">机构进货费用</p>
                        </div>
                        <div class="border_height pull-left"></div>
                        <div class="col-md-5 text-center">
                            <p class="info_money">￥<span id="sign_bonus1">12345</span></p>
                            <p class="info_name">机构进货提成</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="list_team col-md-12">
                        <div class="col-md-5 col-md-offset-1 text-center">
                            <p class="info_money">￥<span id="sign_cost2">3456</span></p>
                            <p class="info_name">提成合计</p>
                        </div>
                        <div class="border_height pull-left"></div>
                        <div class="col-md-5 text-center">
                            <p class="info_money">￥<span id="sign_bonus2">12345</span></p>
                            <p class="info_name">服务商进货金额</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 机构列表 -->
            <div class="table_body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="col-md-1">机构名称</th>
                        <th class="col-md-1">签约时间</th>
                        <th class="col-md-1">签约方案</th>
                        <th class="col-md-1">费用</th>
                        <th class="col-md-1">签约奖金</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>春天里幼儿园</td>
                        <td>2017-02-12 13:20</td>
                        <td>单店方案</td>
                        <td>￥<span>30000</span></td>
                        <td>￥<span>1000</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 基本信息 -->
        <div class="tab-pane fade" id="baseinfo">
            <div class="baseinfo_wrap border-bottom clearfix">
                <div class="col-md-12 row">
                    <div class="col-md-4">
                        <p class="pull-left">编号：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">姓名：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">省市区：</p>
                        <p class="pull-left">湖南省 长沙区</p>
                    </div>
                </div>
                <div class="col-md-12 row">
                    <div class="col-md-4">
                        <p class="pull-left">联系人：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">联系电话：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">联系地址：</p>
                        <p class="pull-left">湖南省长沙市高新区牛逼路101-02栋</p>
                    </div>
                </div>
            </div>
            <div class="baseinfo_wrap clearfix">
                <div class="col-md-12 row">
                    <div class="col-md-4">
                        <p class="pull-left">有效期：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">开始时间：</p>
                        <p class="pull-left">007</p>
                    </div>
                    <div class="col-md-4">
                        <p class="pull-left">创建时间：</p>
                        <p class="pull-left">湖南省 长沙区</p>
                    </div>
                </div>
                <div class="col-md-12 row">
                    <div class="col-md-4">
                        <p class="pull-left">登录账号：</p>
                        <p class="pull-left">007</p>
                    </div>
                </div>
            </div>

        </div>
        <!-- 师训账号 -->
        <div class="tab-pane fade" id="teacher_acount">

            <div class="row">
                <!-- table 部分 -->
                <div class="table_body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="col-md-1">激活码</th>
                            <th class="col-md-1">账号</th>
                            <th class="col-md-1">老师姓名</th>
                            <th class="col-md-1">激活时间</th>
                            <th class="col-md-1">发布时间</th>
                            <th class="col-md-1">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>HeiPis</td>
                            <td>13872635425</td>
                            <td>4</td>
                            <td>46</td>
                            <td>2018-10-09</td>
                            <td>
                                <a href="javascript: void(0);">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <!-- 下属机构 -->
        <div class="tab-pane fade" id="subordinate">
            <div class="row">
                <!-- table 部分 -->
                <div class="table_body table_institution">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="col-md-1">机构名称</th>
                            <th class="col-md-1">联系电话</th>
                            <th class="col-md-1">老师</th>
                            <th class="col-md-1">学生</th>
                            <th class="col-md-1">方案</th>
                            <th class="col-md-2">到期时间</th>
                            <th class="col-md-1">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>HeiPis</td>
                            <td>13872635425</td>
                            <td>4</td>
                            <td>46</td>
                            <td>单店版</td>
                            <td>2018-10-09</td>
                            <td class="institution_operation">
                                <a href="javascript: void(0);">查看详情</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 订单列表 -->
        <div class="tab-pane fade" id="order_list">
            <div class="about_time pull-left">
                <!-- 能用的到的时间 -->
                <div class="time_group input-append date form-group pull-left" id="start_list" data-date="2012-12"
                     data-date-format="dd-mm-yyyy">
                    <input size="16" type="text" class="form-control" value="2012-12" readonly>
                    <span class="time_icon add-on">
                        <i class="icon-sort"></i>
                    </span>
                </div>
                <span class="time_heng pull-left">-</span>
                <!-- 能用的到的时间 -->
                <div class="time_group input-append date form-group pull-left" id="end_list" data-date="2012-12"
                     data-date-format="dd-mm-yyyy">
                    <input size="16" type="text" class="form-control" value="2012-12" readonly>
                    <span class="time_icon add-on">
                        <i class="icon-sort"></i>
                    </span>
                </div>


                <div class="form-group pull-left">
                    <select id="usertype" class="usertype selectpicker form-control">
                        <option value="0">订单类型</option>
                        <option value="1">金贝股</option>
                        <option value="2">教材</option>
                        <option value="3">老师账号</option>
                        <option value="4">签约机构</option>
                    </select>
                </div>


            </div>
            <div class="row">
                <!-- table 部分 -->
                <div class="table_body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="col-md-1">订单类型</th>
                            <th class="col-md-1">单价</th>
                            <th class="col-md-1">数量</th>
                            <th class="col-md-1">金额</th>
                            <th class="col-md-2">订单状态</th>
                            <th class="col-md-1">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>学生教材</td>
                            <td>￥<span>200</span></td>
                            <td>20</td>
                            <td>￥<span>200</span></td>
                            <td>未发货</td>
                            <td class="table_operation">
                                <a class="goDetail" href="javascript: void(0);">查看详情</a>
                            </td>
                        </tr>
                        <tr>
                            <td>学生教材</td>
                            <td>￥<span>200</span></td>
                            <td>20</td>
                            <td>￥<span>200</span></td>
                            <td>已发货</td>
                            <td class="table_operation">
                                <a class="goDetail" href="javascript: void(0);">查看详情</a>
                            </td>
                        </tr>
                        <tr>
                            <td>学生教材</td>
                            <td>￥<span>200</span></td>
                            <td>20</td>
                            <td>￥<span>200</span></td>
                            <td>2018-10-09</td>
                            <td class="table_operation">
                                <a class="goDetail" href="javascript: void(0);">查看详情</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 添加师训账号 模态框 -->
<div class="modal fade clearfix text-center" id="addTeacherModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="display: inline-block; width: auto;">
        <div class="modal-content" style="width: 300px">
            <div class="modal-header">
                <h4 class="modal-title text-center">添加师训账户</h4>
            </div>
            <div class="modal-body clearfix">
                <div class="col-md-12">
                    <div class="form-group">
                        <input id="addTeacherNumber" type="text" class="form-control" placeholder="请输入需要添加的数量">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="addTeacherTrue" class="btn btn-primary center-block" data-dismiss="modal">确认
                </button>
            </div>
        </div>
    </div>
</div>


<!-- 添加内容 modal-->
<div class="add_modal modal fade" id="addSubordinate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加服务商</h4>
            </div>
            <div class="modal-body">
                <div class="server_list server_name clearfix">
                    <p class="server_title pull-left col-md-2">名称:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="name_val" placeholder="请输入机构名称">
                    </div>
                </div>
                <div class="server_list server_number clearfix">
                    <p class="server_title pull-left col-md-2">编号:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="number_val" placeholder="输入合同编号">
                    </div>
                </div>
                <div class="server_list server_city clearfix">
                    <p class="server_title pull-left col-md-2">城市:</p>
                    <form class="form-inline col-md-10">
                        <div data-toggle="distpicker">
                            <div class="server_position position form-group pull-left">
                                <label class="sr-only" for="add_province">Province</label>
                                <select class="form_seclect form-control" id="add_province"></select>
                            </div>
                            <div class="server_position position form-group pull-left">
                                <label class="sr-only" for="add_city">City</label>
                                <select class="form_seclect form-control" id="add_city"></select>
                            </div>
                            <div class="server_position position form-group pull-left">
                                <label class="sr-only" for="add_district">District</label>
                                <select class="form_seclect form-control" id="add_district"></select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="server_list server_contacts clearfix">
                    <p class="server_title pull-left col-md-2">联系人:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="contacts_val" placeholder="输入联系人姓名">
                    </div>
                </div>
                <div class="server_list server_linkNumber clearfix">
                    <p class="server_title pull-left col-md-2">联系电话:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="linkNumber_val" placeholder="输入联系人电话">
                    </div>
                </div>
                <div class="server_list server_address clearfix">
                    <p class="server_title pull-left col-md-2">联系地址:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="address_val" placeholder="输入联系人地址">
                    </div>
                </div>
                <div class="server_list server_address clearfix">
                    <p class="server_title pull-left col-md-2">价格方案:</p>
                    <div class="form-group col-md-8">
                        <select id="price_val" class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="server_list server_timeValidity clearfix">
                    <p class="server_title pull-left col-md-2">签约时间:</p>
                    <div class="server_timeValidity_list form-group col-md-10">
                        <!-- 能用的到的时间 -->
                        <div class="time_group input-append date form-group pull-left" id="signTime"
                             data-date="2012-12-24" data-date-format="dd-mm-yyyy">
                            <input size="16" type="text" class="form-control" value="2012-12-24" readonly>
                            <span class="time_icon add-on">
                                    <i class="icon-sort"></i>
                                </span>
                        </div>
                    </div>
                </div>
                <div class="server_list server_account clearfix">
                    <p class="server_title pull-left col-md-2">登录账号:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="account_val" placeholder="请输入登录手机号">
                    </div>
                </div>
                <div class="server_list server_password clearfix">
                    <p class="server_title pull-left col-md-2">初始密码:</p>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" id="password_val" placeholder="请输入初始密码">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_cancel" class="btn_cancel btn btn-default pull-left" data-dismiss="modal">
                    取消
                </button>
                <button type="button" id="btn_save" class="btn_save btn btn-primary pull-right" data-dismiss="modal">
                    保存
                </button>
            </div>
        </div>
    </div>
</div>


<!-- 进货 模态框-->
<div class="modal fade col-md-8 col-md-offset-2" id="purchaseModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <h4 class="modal-title text-center">进货</h4>
            </div>
            <div class="purchaseModal_body modal-body clearfix">
                <div class="purchaseModal_style col-md-10 col-md-offset-1">
                    <p class="col-md-4">订单类型：</p>

                    <div class="form-group col-md-8 row">
                        <select class="form-control">
                            <option value="0">订单类型</option>
                            <option value="1">金贝股</option>
                            <option value="2">教材</option>
                            <option value="3">老师账号</option>
                            <option value="4">签约机构</option>
                        </select>
                    </div>
                </div>
                <div class="purchaseModal_style col-md-10 col-md-offset-1">
                    <p class="col-md-4">数量：</p>

                    <div class="form-group col-md-8 row">
                        <input type="text" class="form-control" placeholder="输入数量">
                    </div>
                </div>
                <div class="purchaseModal_style col-md-10 col-md-offset-1">
                    <p class="col-md-4">数量：</p>

                    <div class="form-group col-md-8 row">
                        <textarea class="form-control" rows="3" placeholder="需要输入备注信息"></textarea>
                    </div>
                </div>
                <div class="bottom_top col-md-10 col-md-offset-1 border-bottom"></div>

                <div class="purchaseModal_money col-md-10 col-md-offset-1 clearfix">
                    <p>订单金额：</p>
                    <p>￥<span>34000</span></p>
                </div>
            </div>
            <div class="btn_group col-md-8 col-md-offset-2 clearfix">
                <a class="purchase_cancel btn pull-left" data-dismiss="modal">取消</a>
                <a class="purchase_pay btn pull-right" data-dismiss="modal">立即支付</a>
            </div>
        </div>
    </div>
</div>

<script src="./javascripts/jquery-1.9.1.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/distpicker.data.min.js"></script>
<script src="./javascripts/distpicker.min.js"></script>
<script src="./javascripts/bootstrap-datetimepicker.min.js"></script>
<script src="./javascripts/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
    $(function () {
        // 导航选项 点击
        $(".nav_show>li a").click(function () {
            console.log($(this).index());
            $(this).addClass('nav_choose')
                .parent("li").siblings().find("a")
                .removeClass('nav_choose');
        })
        // 返回列表
        $(".add_server").click(function () {
            window.history.go(-1);
        })

        // 服务商选项卡
        $(".server_tab li").click(function () {
            $(this).addClass("choose_tab").siblings().removeClass("choose_tab");
            var _index = $(this).index()
            console.log("index--", _index)
            // 进货 增加师训账户 添加机构 显示问题
            if (_index == 0) {
                $("#add_teacher").hide();
                $("#purchase").hide();
                $("#add_subordinate").hide();
            } else if (_index == 1) {
                $("#add_teacher").hide();
                $("#purchase").hide();
                $("#add_subordinate").hide();
            } else if (_index == 2) {
                $("#add_teacher").show();
                $("#purchase").hide();
                $("#add_subordinate").hide();
            } else if (_index == 3) {
                $("#add_teacher").hide();
                $("#purchase").hide();
                $("#add_subordinate").show();
            } else if (_index == 4) {
                $("#add_teacher").hide();
                $("#purchase").show();
                $("#add_subordinate").hide();
            }
        })

        // 开始时间 - 概览
        $('#start_time').datetimepicker({
            // 选中月份
            format: 'yyyy-mm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: 'zh-CN'
        });
        // 结束时间 - 概览
        $('#end_time').datetimepicker({
            // 选中月份
            format: 'yyyy-mm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: 'zh-CN'
        });
        // 开始时间 - 订单
        $('#start_list').datetimepicker({
            // 选中月份
            format: 'yyyy-mm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: 'zh-CN'
        });
        // 结束时间 - 订单
        $('#end_list').datetimepicker({
            // 选中月份
            format: 'yyyy-mm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: 'zh-CN'
        });
        // 下属机构 签约时间
        $('#signTime').datetimepicker({
            // 选中月份
            format: 'yyyy-mm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: 'zh-CN'
        });

        // 查看 订单详情
        $(".table_body").on("click", ".goDetail", function () {
            console.log("---------")
            window.location.href = "./server_orderList.html"
        })

        // 查看 机构详情
        $(".table_institution").on("click", ".institution_operation", function(){
            console.log("---------要进入机构详情了")
            window.location.href = "./server_institutionDetail.html"
        })

      // 时间选择
      $("div.time_list").click(function(){
        $(this).addClass('time_choose').siblings().removeClass('time_choose');
      })
    })
</script>
</body>

</html>